<template>
  <div class="base-info">
    <line-title :title="data.label" />
    <div class="detail">
      <div v-for="item in data.list" :key="item.id" class="detail-list">
        <div class="name"> {{ item.name }}： </div>
        <div class="describe">
          {{ item.desc }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import LineTitle from '@comp/LineTitle/LineTitle.vue'
  interface dataType {
    label: string
    list: any[]
  }
  withDefaults(
    defineProps<{
      data: dataType
    }>(),
    { data: () => {} }
  )
</script>

<style lang="scss" scoped>
  // 个人基本信息
  .base-info {
    .detail {
      .detail-list {
        display: flex;
        font-size: $about-common-fontSize;
        margin-left: $about-name-margin-left;
        @include marginTop;
        .name {
          min-width: $about-mybase-name-width;
          max-width: $about-mybase-name-width;
        }

        .describe {
          text-align: left;
          @extend %rock;
          padding-right: 5px;
        }
      }
    }
  }
</style>
